<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级小说阅读器</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            color: #f0f0f0;
            transition: all 0.5s ease;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        
        /* 阅读区域样式 */
        .reading-area {
            flex: 1;
            padding: 40px;
            padding-right: 60px;
            line-height: 1.8;
            height: calc(100vh - 40px);
            overflow-y: auto;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        
        .content {
            background-color: rgba(30, 30, 40, 0.85);
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .content::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(to right, #ff8a00, #e52e71, #1a2a6c);
        }
        
        .title {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 25px;
            border-bottom: 2px solid rgba(255, 138, 0, 0.5);
            color: #ff8a00;
            font-size: 2.5rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .chapter {
            margin-bottom: 35px;
            position: relative;
            padding-left: 20px;
        }
        
        .chapter::before {
            content: "❝";
            position: absolute;
            left: -10px;
            top: -15px;
            font-size: 3rem;
            color: rgba(255, 138, 0, 0.3);
        }
        
        .chapter p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            text-align: justify;
            text-indent: 2em;
        }
        
        /* 设置面板样式 */
        .settings-panel {
            width: 380px;
            background: rgba(20, 20, 30, 0.95);
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
            padding: 30px;
            position: fixed;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: 100;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 0.4s ease;
            backdrop-filter: blur(10px);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .settings-panel.active {
            transform: translateX(0);
        }
        
        .settings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .settings-title {
            font-size: 1.8rem;
            color: #ff8a00;
            background: linear-gradient(to right, #ff8a00, #ffca28);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .close-btn {
            background: rgba(255, 138, 0, 0.2);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 1.2rem;
            cursor: pointer;
            color: #ffca28;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .close-btn:hover {
            background: rgba(255, 138, 0, 0.4);
            transform: rotate(90deg);
        }
        
        .setting-group {
            margin-bottom: 25px;
            padding: 15px;
            background: rgba(30, 30, 45, 0.6);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .setting-label {
            display: block;
            margin-bottom: 12px;
            font-weight: bold;
            color: #ffca28;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        
        .setting-label i {
            margin-right: 10px;
            color: #ff8a00;
        }
        
        .color-picker {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        .color-option {
            width: 35px;
            height: 35px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid rgba(255, 255, 255, 0.3);
            transition: all 0.2s;
            box-shadow: 0 3px 6px rgba(0,0,0,0.2);
        }
        
        .color-option:hover, .color-option.active {
            transform: scale(1.15);
            border-color: #fff;
            box-shadow: 0 0 10px rgba(255, 202, 40, 0.5);
        }
        
        .custom-color {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 15px;
        }
        
        .custom-color input {
            flex: 1;
            height: 40px;
            border: none;
            border-radius: 8px;
            padding: 0 15px;
            background: rgba(50, 50, 65, 0.8);
            color: white;
            font-family: inherit;
        }
        
        .custom-color-btn {
            background: linear-gradient(to right, #ff8a00, #e52e71);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .custom-color-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(229, 46, 113, 0.4);
        }
        
        .bg-preview {
            width: 100%;
            height: 120px;
            border-radius: 10px;
            margin: 15px 0;
            background-size: cover;
            background-position: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.7);
            font-style: italic;
        }
        
        select, input[type="file"] {
            width: 100%;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            background: rgba(50, 50, 65, 0.8);
            font-family: inherit;
            color: white;
            margin-bottom: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .slider-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 10px 0;
        }
        
        .slider-container label {
            min-width: 120px;
            color: #ffca28;
        }
        
        .slider-value {
            min-width: 50px;
            text-align: center;
            background: rgba(50, 50, 65, 0.8);
            padding: 5px 10px;
            border-radius: 5px;
            color: white;
        }
        
        input[type="range"] {
            flex: 1;
            height: 8px;
            -webkit-appearance: none;
            background: linear-gradient(to right, #ff8a00, #e52e71);
            border-radius: 10px;
            outline: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        
        .toggle-btn {
            position: fixed;
            right: 25px;
            top: 25px;
            background: linear-gradient(135deg, #ff8a00, #e52e71);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 1.8rem;
            cursor: pointer;
            box-shadow: 0 5px 20px rgba(229, 46, 113, 0.5);
            z-index: 50;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.4s;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(229, 46, 113, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(229, 46, 113, 0); }
            100% { box-shadow: 0 0 0 0 rgba(229, 46, 113, 0); }
        }
        
        .toggle-btn:hover {
            transform: rotate(45deg) scale(1.1);
            animation: none;
        }
        
        /* 预设背景样式 */
        .bg-option {
            width: 100%;
            height: 70px;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        
        .bg-option::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.3);
            transition: all 0.3s;
        }
        
        .bg-option:hover, .bg-option.active {
            border-color: #ff8a00;
            box-shadow: 0 0 15px rgba(255, 138, 0, 0.6);
        }
        
        .bg-option:hover::after, .bg-option.active::after {
            background: rgba(0,0,0,0.1);
        }
        
        /* 响应式设计 */
        @media (max-width: 1000px) {
            .container {
                flex-direction: column;
            }
            
            .reading-area {
                padding-right: 40px;
                height: auto;
                min-height: 100vh;
            }
            
            .settings-panel {
                width: 100%;
                height: auto;
                max-height: 90vh;
                top: auto;
                bottom: 0;
                transform: translateY(100%);
            }
            
            .settings-panel.active {
                transform: translateY(0);
            }
            
            .toggle-btn {
                right: 20px;
                bottom: 20px;
                top: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 阅读区域 -->
        <div class="reading-area" id="readingArea">
            <div class="content" id="contentArea">
                <h1 class="title">星辰变</h1>
                
                <div class="chapter">
                    <p>夜空如墨，繁星点点。秦羽独自一人站在山顶，仰望浩瀚星河。他心中明白，从今夜起，他的人生将彻底改变。</p>
                    <p>那颗从天而降的神秘流星，不仅改变了他的体质，更在他脑海中留下了一部名为《星辰变》的绝世功法。这功法以星辰之力为源，修炼到极致可掌控宇宙星辰，破碎虚空。</p>
                    <p>"父亲，大哥，二哥...你们等着，我秦羽定会变得足够强大，不再让任何人轻视我们秦家！"少年紧握双拳，眼中闪烁着星辰般的光芒。</p>
                </div>
                
                <div class="chapter">
                    <p>云雾山庄的修炼场上，秦羽正按照《星辰变》第一层"星云期"的法门运转内力。只见他周身渐渐浮现出淡淡的银光，如同被星辉笼罩。</p>
                    <p>突然，他睁开双眼，一拳击向面前的巨石。拳风过处，坚硬的花岗岩竟如豆腐般碎裂开来。</p>
                    <p>"这...这就是星辰之力吗？"秦羽难以置信地看着自己的拳头。仅仅修炼了三天，他的力量就已远超普通后天武者。</p>
                </div>
                
                <div class="chapter">
                    <p>楚王朝的皇城比武大会，是年轻武者扬名立万的舞台。秦羽代表秦家出战，一路过关斩将，最终站在了决赛的擂台上。</p>
                    <p>他的对手是号称"楚王朝第一天才"的项央，年仅十八岁便已踏入先天境界。</p>
                    <p>"秦羽，能走到这里你已经很幸运了。现在认输，还能保全颜面。"项央负手而立，语气中充满不屑。</p>
                    <p>秦羽微微一笑，眼中星光闪烁："项兄，胜负还未可知。"</p>
                </div>
                
                <div class="chapter">
                    <p>战斗开始，项央如猛虎下山，先天真气汹涌澎湃。而秦羽却如星空般深邃，身法飘忽不定，每次出手都带着点点星芒。</p>
                    <p>当项央使出绝学"霸王枪"时，整个擂台都被凌厉的枪气笼罩。千钧一发之际，秦羽体内星辰之力爆发，一拳击出，竟有银河倒悬之势！</p>
                    <p>枪断，人飞。全场寂静。</p>
                    <p>秦羽站在擂台中央，仰望天空："星辰大海，才是我的征途。"</p>
                </div>
            </div>
        </div>
        
        <!-- 设置面板 -->
        <div class="settings-panel" id="settingsPanel">
            <div class="settings-header">
                <h2 class="settings-title"><i class="fas fa-cog"></i> 阅读设置中心</h2>
                <button class="close-btn" id="closeBtn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="setting-group">
                <label class="setting-label"><i class="fas fa-paint-roller"></i> 页面背景颜色</label>
                <div class="color-picker">
                    <div class="color-option" style="background-color: #1a2a6c;" data-color="#1a2a6c"></div>
                    <div class="color-option" style="background-color: #2c3e50;" data-color="#2c3e50"></div>
                    <div class="color-option" style="background-color: #1a1a2e;" data-color="#1a1a2e"></div>
                    <div class="color-option" style="background-color: #0f3460;" data-color="#0f3460"></div>
                    <div class="color-option" style="background-color: #16213e;" data-color="#16213e"></div>
                    <div class="color-option" style="background-color: #3a1c71;" data-color="#3a1c71"></div>
                </div>
                <div class="custom-color">
                    <input type="text" id="bgColorInput" placeholder="#RRGGBB 或 rgb(r,g,b)" value="#1a2a6c">
                    <button class="custom-color-btn" id="bgColorBtn">应用</button>
                </div>
            </div>
            
            <div class="setting-group">
                <label class="setting-label"><i class="fas fa-image"></i> 页面背景图片</label>
                <div class="bg-preview" id="bgPreview">
                    当前背景预览区域
                </div>
                <div class="bg-picker">
                    <div class="bg-option" style="background-image: url('https://images.unsplash.com/photo-1505506874110-6a7a69069a08?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');" data-bg="url('https://images.unsplash.com/photo-1505506874110-6a7a69069a08?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80')"></div>
                    <div class="bg-option" style="background-image: url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');" data-bg="url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80')"></div>
                    <div class="bg-option" style="background-image: url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');" data-bg="url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80')"></div>
                    <div class="bg-option" style="background-image: none; background-color: #1a1a2e;" data-bg="none"></div>
                </div>
                <input type="file" id="bgUpload" accept="image/*">
            </div>
            
            <div class="setting-group">
                <label class="setting-label"><i class="fas fa-font"></i> 文字颜色</label>
                <div class="color-picker">
                    <div class="color-option" style="background-color: #f0f0f0;" data-text="#f0f0f0"></div>
                    <div class="color-option" style="background-color: #ffca28;" data-text="#ffca28"></div>
                    <div class="color-option" style="background-color: #a5d6a7;" data-text="#a5d6a7"></div>
                    <div class="color-option" style="background-color: #81d4fa;" data-text="#81d4fa"></div>
                    <div class="color-option" style="background-color: #f48fb1;" data-text="#f48fb1"></div>
                    <div class="color-option" style="background-color: #e0e0e0;" data-text="#e0e0e0"></div>
                </div>
                <div class="custom-color">
                    <input type="text" id="textColorInput" placeholder="#RRGGBB 或 rgb(r,g,b)" value="#f0f0f0">
                    <button class="custom-color-btn" id="textColorBtn">应用</button>
                </div>
            </div>
            
            <div class="setting-group">
                <label class="setting-label"><i class="fas fa-book-open"></i> 文本区域设置</label>
                <div class="slider-container">
                    <label><i class="fas fa-tint"></i> 背景透明度</label>
                    <input type="range" id="contentOpacity" min="0.1" max="1" step="0.05" value="0.85">
                    <span class="slider-value" id="opacityValue">85%</span>
                </div>
                <div class="slider-container">
                    <label><i class="fas fa-palette"></i> 背景颜色</label>
                    <input type="color" id="contentBgColor" value="#1e1e28">
                </div>
            </div>
            
            <div class="setting-group">
                <label class="setting-label"><i class="fas fa-text-height"></i> 文字设置</label>
                <div class="slider-container">
                    <label><i class="fas fa-ruler"></i> 文字大小</label>
                    <input type="range" id="fontSize" min="14" max="24" value="18">
                    <span class="slider-value" id="fontSizeValue">18px</span>
                </div>
                <div>
                    <label class="setting-label"><i class="fas fa-font"></i> 文字字体</label>
                    <select id="fontFamily">
                        <option value="'Noto Serif SC', serif">思源宋体</option>
                        <option value="'SimSun', serif">宋体</option>
                        <option value="'SimHei', sans-serif">黑体</option>
                        <option value="'KaiTi', serif">楷体</option>
                        <option value="'Microsoft YaHei', sans-serif">微软雅黑</option>
                        <option value="'Courier New', monospace">Courier New</option>
                    </select>
                </div>
            </div>
            
            <div class="setting-group">
                <button class="custom-color-btn" id="resetBtn" style="width:100%;padding:15px;font-size:1.1rem;">
                    <i class="fas fa-sync-alt"></i> 恢复默认设置
                </button>
            </div>
        </div>
        
        <!-- 设置按钮 -->
        <button class="toggle-btn" id="toggleBtn">
            <i class="fas fa-cog"></i>
        </button>
    </div>

    <script>
        // DOM元素
        const settingsPanel = document.getElementById('settingsPanel');
        const toggleBtn = document.getElementById('toggleBtn');
        const closeBtn = document.getElementById('closeBtn');
        const readingArea = document.getElementById('readingArea');
        const contentArea = document.getElementById('contentArea');
        const bgPreview = document.getElementById('bgPreview');
        const bgUpload = document.getElementById('bgUpload');
        const fontSizeSlider = document.getElementById('fontSize');
        const fontSizeValue = document.getElementById('fontSizeValue');
        const fontFamilySelect = document.getElementById('fontFamily');
        const contentOpacity = document.getElementById('contentOpacity');
        const opacityValue = document.getElementById('opacityValue');
        const contentBgColor = document.getElementById('contentBgColor');
        const bgColorInput = document.getElementById('bgColorInput');
        const bgColorBtn = document.getElementById('bgColorBtn');
        const textColorInput = document.getElementById('textColorInput');
        const textColorBtn = document.getElementById('textColorBtn');
        const resetBtn = document.getElementById('resetBtn');
        
        // 初始化设置
        function initSettings() {
            // 从本地存储加载设置
            const bgColor = localStorage.getItem('bgColor') || '#1a2a6c';
            const bgImage = localStorage.getItem('bgImage') || 'none';
            const textColor = localStorage.getItem('textColor') || '#f0f0f0';
            const fontSize = localStorage.getItem('fontSize') || '18';
            const fontFamily = localStorage.getItem('fontFamily') || "'Noto Serif SC', serif";
            const contentBg = localStorage.getItem('contentBg') || '#1e1e28';
            const contentAlpha = localStorage.getItem('contentAlpha') || '0.85';
            
            // 应用设置
            document.body.style.backgroundColor = bgColor;
            document.body.style.backgroundImage = bgImage;
            readingArea.style.color = textColor;
            readingArea.style.fontSize = `${fontSize}px`;
            readingArea.style.fontFamily = fontFamily;
            contentArea.style.backgroundColor = hexToRgba(contentBg, contentAlpha);
            
            // 更新UI控件
            fontSizeSlider.value = fontSize;
            fontSizeValue.textContent = `${fontSize}px`;
            fontFamilySelect.value = fontFamily;
            contentOpacity.value = contentAlpha;
            opacityValue.textContent = `${Math.round(contentAlpha * 100)}%`;
            contentBgColor.value = rgbToHex(contentBg);
            bgColorInput.value = bgColor;
            textColorInput.value = textColor;
            
            // 设置背景预览
            if(bgImage !== 'none') {
                bgPreview.style.backgroundImage = bgImage;
                bgPreview.textContent = '';
            } else {
                bgPreview.style.background = bgColor;
                bgPreview.textContent = '纯色背景';
            }
            
            // 激活当前颜色选项
            activateColorOption(bgColor, 'bg');
            activateColorOption(textColor, 'text');
        }
        
        // 激活当前颜色选项
        function activateColorOption(color, type) {
            const options = document.querySelectorAll(`.color-option[data-${type}="${color}"]`);
            options.forEach(option => {
                option.classList.add('active');
            });
        }
        
        // 十六进制转RGBA
        function hexToRgba(hex, alpha) {
            let r = 0, g = 0, b = 0;
            
            // 处理3位十六进制
            if (hex.length === 4) {
                r = parseInt(hex[1] + hex[1], 16);
                g = parseInt(hex[2] + hex[2], 16);
                b = parseInt(hex[3] + hex[3], 16);
            }
            // 处理6位十六进制
            else if (hex.length === 7) {
                r = parseInt(hex[1] + hex[2], 16);
                g = parseInt(hex[3] + hex[4], 16);
                b = parseInt(hex[5] + hex[6], 16);
            }
            
            return `rgba(${r}, ${g}, ${b}, ${alpha})`;
        }
        
        // RGB转十六进制
        function rgbToHex(rgb) {
            // 如果是十六进制直接返回
            if(rgb.startsWith('#')) return rgb;
            
            // 提取rgb值
            const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
            if (!match) return '#1e1e28';
            
            const r = parseInt(match[1]);
            const g = parseInt(match[2]);
            const b = parseInt(match[3]);
            
            return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
        }
        
        // 切换设置面板
        toggleBtn.addEventListener('click', () => {
            settingsPanel.classList.toggle('active');
        });
        
        // 关闭设置面板
        closeBtn.addEventListener('click', () => {
            settingsPanel.classList.remove('active');
        });
        
        // 背景颜色选择
        const bgColorOptions = document.querySelectorAll('.color-option[data-color]');
        bgColorOptions.forEach(option => {
            option.addEventListener('click', () => {
                const color = option.getAttribute('data-color');
                document.body.style.backgroundColor = color;
                document.body.style.backgroundImage = 'none';
                localStorage.setItem('bgColor', color);
                localStorage.removeItem('bgImage');
                bgColorInput.value = color;
                bgPreview.style.background = color;
                bgPreview.textContent = '纯色背景';
                
                // 更新激活状态
                bgColorOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
                
                // 重置背景图片选项
                document.querySelectorAll('.bg-option').forEach(bgOpt => {
                    bgOpt.classList.remove('active');
                });
            });
        });
        
        // 自定义背景颜色
        bgColorBtn.addEventListener('click', () => {
            const color = bgColorInput.value;
            document.body.style.backgroundColor = color;
            document.body.style.backgroundImage = 'none';
            localStorage.setItem('bgColor', color);
            localStorage.removeItem('bgImage');
            bgPreview.style.background = color;
            bgPreview.textContent = '纯色背景';
            
            // 更新激活状态
            bgColorOptions.forEach(opt => opt.classList.remove('active'));
            document.querySelectorAll('.bg-option').forEach(bgOpt => {
                bgOpt.classList.remove('active');
            });
        });
        
        // 背景图片选择
        const bgOptions = document.querySelectorAll('.bg-option');
        bgOptions.forEach(option => {
            option.addEventListener('click', () => {
                const bg = option.getAttribute('data-bg');
                document.body.style.backgroundImage = bg;
                document.body.style.backgroundColor = '';
                localStorage.setItem('bgImage', bg);
                localStorage.removeItem('bgColor');
                bgPreview.style.backgroundImage = bg;
                bgPreview.textContent = '';
                
                // 更新激活状态
                bgOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
                
                // 重置背景颜色选项
                bgColorOptions.forEach(opt => opt.classList.remove('active'));
                bgColorInput.value = '';
            });
        });
        
        // 自定义背景图片上传
        bgUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(event) {
                    const bg = `url(${event.target.result})`;
                    document.body.style.backgroundImage = bg;
                    document.body.style.backgroundColor = '';
                    localStorage.setItem('bgImage', bg);
                    localStorage.removeItem('bgColor');
                    bgPreview.style.backgroundImage = bg;
                    bgPreview.textContent = '';
                    
                    // 更新激活状态
                    bgOptions.forEach(opt => opt.classList.remove('active'));
                    bgColorOptions.forEach(opt => opt.classList.remove('active'));
                    bgColorInput.value = '';
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 文字颜色选择
        const textColorOptions = document.querySelectorAll('.color-option[data-text]');
        textColorOptions.forEach(option => {
            option.addEventListener('click', () => {
                const color = option.getAttribute('data-text');
                readingArea.style.color = color;
                localStorage.setItem('textColor', color);
                textColorInput.value = color;
                
                // 更新激活状态
                textColorOptions.forEach(opt => opt.classList.remove('active'));
                option.classList.add('active');
            });
        });
        
        // 自定义文字颜色
        textColorBtn.addEventListener('click', () => {
            const color = textColorInput.value;
            readingArea.style.color = color;
            localStorage.setItem('textColor', color);
            
            // 更新激活状态
            textColorOptions.forEach(opt => opt.classList.remove('active'));
        });
        
        // 字体选择
        fontFamilySelect.addEventListener('change', () => {
            const font = fontFamilySelect.value;
            readingArea.style.fontFamily = font;
            localStorage.setItem('fontFamily', font);
        });
        
        // 字体大小调整
        fontSizeSlider.addEventListener('input', () => {
            const size = fontSizeSlider.value;
            readingArea.style.fontSize = `${size}px`;
            fontSizeValue.textContent = `${size}px`;
            localStorage.setItem('fontSize', size);
        });
        
        // 内容区域透明度调整
        contentOpacity.addEventListener('input', () => {
            const alpha = contentOpacity.value;
            const bgColor = contentBgColor.value;
            contentArea.style.backgroundColor = hexToRgba(bgColor, alpha);
            opacityValue.textContent = `${Math.round(alpha * 100)}%`;
            localStorage.setItem('contentAlpha', alpha);
        });
        
        // 内容区域背景颜色调整
        contentBgColor.addEventListener('input', () => {
            const color = contentBgColor.value;
            const alpha = contentOpacity.value;
            contentArea.style.backgroundColor = hexToRgba(color, alpha);
            localStorage.setItem('contentBg', color);
        });
        
        // 重置设置
        resetBtn.addEventListener('click', () => {
            localStorage.clear();
            initSettings();
            alert('设置已恢复默认！');
        });
        
        // 初始化
        document.addEventListener('DOMContentLoaded', initSettings);
    </script>
</body>
</html>